<template>
  <div class="timeLine">
    <a-timeline>
      <a-timeline-item v-for="(log,index) in handlerLogList" :key="index">
        <div style="display: flex; align-items: center">
          <div class="time">{{log.createTime}}</div>
          <div class="img">{{log.createUserId_dictText.substring(0,1)}}</div>
          <div class="name">{{log.createUserId_dictText}}</div>
          <div class="title">{{log.content}}</div>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
export default {
  name: 'RelativeHandle',
  props: {
    id: String
  }, 
  data(){
    return{
      handlerLogList:[],
    }
  },
  created(){
    httpAction('/online/api/pagingWvVisitLog', { objectId: this.id }, 'post').then((res) => {
      if (res.success) {
        this.handlerLogList = res.result.records
      }
    })
  },
}
</script>

<style lang="less" scoped>
// 时间轴样式
.timeLine {
  .time {
    padding: 0 10px;
    flex-shrink: 0;
    color: #aaa;
    font-size: 12px;
  }
  .img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #168a40;
    color: #ffffff;
    border-radius: 50%;
  }
  .name {
    padding: 0 10px;
    flex-shrink: 0;
    color: #333;
  }
  .title {
    flex: 1;
    color: #333;
  }
}
</style>